border-top-image
border-right-image
border-bottom-image
border-left-image
y de border-corner-image:
border-top-left-image
border-top-right-image
border-bottom-left-image
border-bottom-right-image
Si añadimos en nuestra hoja de estilos:
#border-image {
margin:0 30px;
padding:14px;
width:270px;
border:1em double orange;
border:1em double orange;
-webkit-border-image: url(url-imagen.png) 27 27 27 27 round round;
-moz-border-image: url(url-imagen.png) 27 27 27 27 round round;
}
El ancho lo establecemos con width.
Añadimos -webkit-border-image para visualizarlo en Safari y Chrome y -moz-border-image para Firefox.
Los cuatro valores que añadimos establecen el tamaño de cada esquina en el mismo orden que hacemos con margin y padding arriba, derecha, abajo, izquierda.
Con round establecemos la forma en que se van a escalar los bordes " round" o "stretch".¿Por qué repetimos el valor? porque si lo añadimos sólo una vez equivale al mismo valor para los cuatro lados. Donde url imagen añadiríamos la url de la imagen, para el ejemplo la imagen es la siguiente:
Y en una entrada o gadget de html
<p id="border-image">Escribimos un texto cualquiera</p>
Obtendríamos el siguiente borde con "round round" (redondear)
Escribimos un texto cualquiera
Con los mismos estilos pero cambiando por "stretch stretch" (estirar)
Escribimos un texto cualquiera
En navegadores que no soportan esta propiedad lo verán de la siguiente forma porque añadimos la propiedad border, border:1em double orange;
REFERENCIA:CSS3.info
Muy bueno :D
EXCELENT! :D
Siiii me encantó! IE como siempre fastidiando las grandes ideas...
Caramba qué bonito :)
Iniciemos una campaña 'Navegadores a ponerse de acuerdo' ;)
y Blogger o yo :S no se ve el pajarito en el blog, estoy un poquitillo cansada!
Besitos!
Saludos Gema, tengo un problema con el Feedburner de mi blog.Las entradas aparecen ahí con las letras pegadas, sucede cuando copio y pego una entrada.Qusiera saber que puedo hacer para solucionar esto.
Gracias.
Se me olvidaba este es mo feed:
http://feeds.feedburner.com/cristoestaalaspuertas
:: Es verdad que resulta interesante JMiur, hasta ahora cuando quería añadir borde con imagen lo hacía añadiendo esa imagen como fondo y dejando un margen entre el fondo y la imagen, eso simulaba un borde pero está bien tener cada vez más propiedades para jugar :)
:: Hola CHiCken, gracias por comentar :)
:: Que no te oiga IE Maite :S
:: Graciela yo veo tu pajarito piando por el blog y sin problemas :)
:: Saludos Angel Luis González ¿puede ser que las entradas las escriba en Word y las copie para pegar en el editor de Blogger ?
Comento esto porque cuando copiamos en Word nos llevamos también etiquetas que en Blogger resultan inservibles y ocasionan esos problemas.
Son algunas entradas que tomo de noticias,pero ya lo he solucionado.Ahora utilizo el Notepad y limpio el texto de todo código.
Me resultó bien, pues no sabía que al pegar en Notepad se organiza el texto en párrafos.
No utilizo Word por lo mismo.
Gracias.
Nota: solo los miembros de este blog pueden publicar comentarios.